<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>我购买的模板</title>
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/icons/iconfont.css" />
    <link rel="stylesheet" href="../css/head.css" />
    <link rel="stylesheet" href="../css/footer.css" />
    <link rel="stylesheet" href="../css/backStageMenu.css" />
    <link rel="stylesheet" href="../css/myLikeTemplate.css" />
</head>

<body>
    <!-- 头部区域 -->
    <header>
        <div class="logo">
            <a href="../index.html"><img src="../images/logo.png" alt="我要去印"></a>
        </div>
        <div class="iconmenu">
            <input type="text" value="" placeholder="搜索">
            <i class="iconfont icon-sousuo"></i>
        </div>
        <div class="message">
            <i class="iconfont icon-xiaoxi"></i>
            <p>12</p>
        </div>
        <div class="user-info">
            <img src="../images/menuUserinfoHeadkey.jpg" alt="">
            <div class="triangle-bottom"></div>
            <div class="all-info">
                <p><i class="iconfont icon-zhuye"></i>我的主页</p>
                <p><i class="iconfont icon-dingdan"></i>我的订单</p>
                <p><i class="iconfont icon-tuichu"></i>退出</p>
            </div>
        </div>
    </header>
    <div class="main clearfix">
        <!--左边菜单栏-->
        <div class="menu fl">
            <div class="menu-userinfo">
                <img src="../images/menuUserinfoHeadkey.jpg" />
                <div class="menu-userinfo-phone">18634523418</div>
            </div>
            <div class="menu-myTemplate">
                <div class="menu-inner-rule">
                    <li class="iconfont icon-dingdan"></li>
                    <div>制卡项目</div>
                </div>
                <div id="myLikeTemplate" class="menu-inner-rule">
                    <li class="iconfont icon-xihuan"></li>
                    <div>我喜欢的模板</div>
                </div>
                <div id="myPurchaseTemplate" class="menu-inner-rule menu-inner-rule-on">
                    <li class="iconfont icon-yigoumoban"></li>
                    <div>我购买的模板</div>
                </div>
            </div>
            <div class="menu-orderInfo">
                <div id="myOrderList" class="menu-inner-rule">
                    <li class="iconfont icon-dingdan1"></li>
                    <div>我的订单</div>
                </div>
                <div id="personalInfo" class="menu-inner-rule">
                    <li class="iconfont icon-renyuanxinxi"></li>
                    <div>人员信息</div>
                </div>
                <div id="recAddress" class="menu-inner-rule">
                    <li class="iconfont icon-dizhi"></li>
                    <div>收货地址</div>
                </div>
            </div>
            <div class="menu-personal-data">
                <div id="userInfo" class="menu-inner-rule">
                    <li class="iconfont icon-bianji"></li>
                    <div>个人资料</div>
                </div>
            </div>
        </div>
        <!--左侧菜单栏 end-->

        <div class="content fl">
            <div class="likeTemplate-title">我购买的模板</div>
            <div class="templateList clearfix">
                <div class="templateRule fl">
                    <img src="../images/template-img01.jpg" />
                    <div class="template-mask clearfix">
                        <div class="mask-like fl">
                            <div class="mask-like-icon mask-like-icon-on">
                                <li class="iconfont icon-xihuan"></li>
                            </div>
                            <div>取消喜欢</div>
                        </div>
                        <div class="mask-use fl">
                            <div class="mask-use-icon">
                                <li class="iconfont icon-bianji"></li>
                            </div>
                            <div>使用</div>
                        </div>
                    </div>
                    <div class="rule-title">清爽白色员工卡入场卡模板入场卡模板</div>
                </div>
                <div class="templateRule fl">
                    <img src="../images/template-img01.jpg" />
                    <div class="template-mask clearfix">
                        <div class="mask-like fl">
                            <div class="mask-like-icon">
                                <li class="iconfont icon-xihuan"></li>
                            </div>
                            <div>喜欢</div>
                        </div>
                        <div class="mask-use fl">
                            <div class="mask-use-icon">
                                <li class="iconfont icon-bianji"></li>
                            </div>
                            <div>使用</div>
                        </div>
                    </div>
                    <div class="rule-title">清爽白色员工卡入场卡模板入场卡模板</div>
                </div>
                <div class="templateRule fl">
                    <img src="../images/template-img01.jpg" />
                    <div class="template-mask clearfix">
                        <div class="mask-like fl">
                            <div class="mask-like-icon">
                                <li class="iconfont icon-xihuan"></li>
                            </div>
                            <div>喜欢</div>
                        </div>
                        <div class="mask-use fl">
                            <div class="mask-use-icon">
                                <li class="iconfont icon-bianji"></li>
                            </div>
                            <div>使用</div>
                        </div>
                    </div>
                    <div class="rule-title">清爽白色员工卡入场卡模板入场卡模板</div>
                </div>
                <div class="templateRule fl">
                    <img src="../images/template-img02.jpg" />
                    <div class="template-mask clearfix">
                        <div class="mask-like fl">
                            <div class="mask-like-icon">
                                <li class="iconfont icon-xihuan"></li>
                            </div>
                            <div>喜欢</div>
                        </div>
                        <div class="mask-use fl">
                            <div class="mask-use-icon">
                                <li class="iconfont icon-bianji"></li>
                            </div>
                            <div>使用</div>
                        </div>
                    </div>
                    <div class="rule-title">清爽白色员工卡入场卡模板</div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="wqb">
            <img src="../images/weixin.jpg" alt="">
            <img src="../images/weibo.jpg" alt="">
            <img src="../images/qq.jpg" alt="">
        </div>
        <div class="footer-info">
            <ul class="clearfix">
                <li><a href="javascript:void(0)">关于我们</a></li>
                <li>|</li>
                <li><a href="javascript:void(0)">联系我们</a></li>
                <li>|</li>
                <li><a href="javascript:void(0)">加入我们</a></li>
                <li>|</li>
                <li><a href="javascript:void(0)">商务合作</a></li>
            </ul>
            <p>版权所有&nbsp©&nbsp京ICP备14007358号-1 / 京公网安备11010802014104号</p>
        </div>
        <div class="erweima"><img src="../images/erweima.jpg" alt=""></div>
    </footer>

    <script src="../js/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#myOrderList").click(function () {
                location.href = 'myOrderList.html';
            })
            $("#personalInfo").click(function () {
                location.href = 'personalInfo.html';
            })
            $("#recAddress").click(function () {
                location.href = 'recAddress.html';
            })
            $("#userInfo").click(function () {
                location.href = 'userInfo.html';
            })
            $("#myPurchaseTemplate").click(function () {
                location.href = 'myPurchaseTemplate.html';
            })
            $("#myLikeTemplate").click(function () {
                location.href = 'myLikeTemplate.html';
            })
            // 用户头像点击事件
            $('.user-info').mouseover(function () {

                $('.user-info .all-info').stop().slideDown();

            })
            $('.user-info').mouseout(function () {
                $('.user-info .all-info').stop().slideUp();
            })

        })
    </script>
</body>

</html>